<template>
    <div class="nav-select">
        <div class="grade" v-for="(item, index) in navData" :key="index">
            <template v-if="item.name == '科目'">
                <template v-if="item.list.length <= item.max">
                    <div class="grade-title">{{ item.name }}：</div>
                    <div class="grade-selects">
                        <div
                            class="grade-selects-item"
                            v-for="(item1, index1) in item.list"
                            :key="index1"
                            @click="switchNav(index, index1)"
                            :class="
                                item.checkName == item1.subject_name
                                    ? 'grade-selects-item1'
                                    : 'grade-selects-item'
                            "
                        >
                            {{ item1.subject_name }}
                        </div>
                    </div>
                </template>
                <template v-if="item.list.length > item.max">
                    <div class="grade-title">{{ item.name }}：</div>
                    <div class="grade-selects">
                        <div class="grade-selects-cow">
                            <div style="display: flex;flex-wrap: wrap;">
                                <div
                                    class="grade-selects-item"
                                    v-for="(item1, index1) in item.list.slice(
                                        0,
                                        item.showTypeLength
                                    )"
                                    @click="switchNav(index, index1)"
                                    :key="index1"
                                    :class="
                                        item.checkName == item1.subject_name
                                            ? 'grade-selects-item1'
                                            : 'grade-selects-item'
                                    "
                                >
                                    {{ item1.subject_name }}
                                </div>
                            </div>
                            <div
                                class="grade-selects-zk"
                                @click="isShow(index)"
                                v-if="item.list.length > item.max"
                            >
                                {{ item.fold ? "展开" : "收起" }}
                                <i
                                    class="el-icon-arrow-down"
                                    style="margin-left: 5px;color: #018854;"
                                    v-if="item.fold"
                                ></i>
                                <i
                                    class="el-icon-arrow-up"
                                    style="margin-left: 5px;color: #018854;"
                                    v-if="!item.fold"
                                ></i>
                            </div>
                        </div>
                    </div>
                </template>
            </template>
            <template v-else-if="item.name == '类型'">
                <template v-if="item.list.length <= item.max">
                    <div class="grade-title">{{ item.name }}：</div>
                    <div class="grade-selects">
                        <div
                            class="grade-selects-item"
                            v-for="(item1, index1) in item.list"
                            :key="index1"
                            @click="switchNav(index, index1)"
                            :class="
                                item.checkName == item1.kind_type_name
                                    ? 'grade-selects-item1'
                                    : 'grade-selects-item'
                            "
                        >
                            {{ item1.kind_type_name }}
                        </div>
                    </div>
                </template>
                <template v-if="item.list.length > item.max">
                    <div class="grade-title">{{ item.name }}：</div>
                    <div class="grade-selects">
                        <div class="grade-selects-cow">
                            <div style="display: flex;flex-wrap: wrap;">
                                <div
                                    class="grade-selects-item"
                                    v-for="(item1, index1) in item.list.slice(
                                        0,
                                        item.showTypeLength
                                    )"
                                    @click="switchNav1(index, index1)"
                                    :key="index1"
                                    :class="
                                        item.checkName == item1.kind_type_name
                                            ? 'grade-selects-item1'
                                            : 'grade-selects-item'
                                    "
                                >
                                    {{ item1.kind_type_name }}
                                </div>
                            </div>
                            <div
                                class="grade-selects-zk"
                                @click="isShow(index)"
                                v-if="item.list.length > item.max"
                            >
                                {{ item.fold ? "展开" : "收起" }}
                                <i
                                    class="el-icon-arrow-down"
                                    style="margin-left: 5px;color: #018854;"
                                    v-if="item.fold"
                                ></i>
                                <i
                                    class="el-icon-arrow-up"
                                    style="margin-left: 5px;color: #018854;"
                                    v-if="!item.fold"
                                ></i>
                            </div>
                        </div>
                    </div>
                </template>
            </template>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    props: {
        navData: {
            type: Array,
            default: () => {
                return [];
            }
        }
    },
    data() {
        return {
            sid: "",
            kind_type_id: ""
        };
    },
    computed: {},
    watch: {},
    methods: {
        isShow(index) {
            if (this.navData[index].fold) {
                this.navData[index].showTypeLength = this.navData[
                    index
                ].list.length;
            } else {
                console.log(
                    this.navData[index].index1,
                    this.navData[index].max - 1
                );
                if (this.navData[index].index1 > this.navData[index].max - 1) {
                    return;
                }
                this.navData[index].showTypeLength = this.navData[index].max;
            }
            this.navData[index].fold = !this.navData[index].fold;
        },
        switchNav(index, index1) {
            this.sid = this.navData[index].list[index1].sid;
            this.navData[index].checkName = this.navData[index].list[
                index1
            ].subject_name;
            if (this.navData[index].index1 !== undefined) {
                this.navData[index].index1 = index1;
            }
            // 同步与趣练
            this.$emit(
                "getSectionList",
                1,
                "",
                1,
                this.navData[index].list[index1].sid,
                1
            );
            // 班级测验
            this.$emit("requData", this.navData[index].list[index1].sid);

            // 自评
            this.$emit("getDataList", this.sid, this.kind_type_id);
            this.$emit("InitPage");
        },
        switchNav1(index, index1) {
            this.kind_type_id = this.navData[index].list[index1].kind_type_id;
            this.navData[index].checkName = this.navData[index].list[
                index1
            ].kind_type_name;
            if (this.navData[index].index1 !== undefined) {
                this.navData[index].index1 = index1;
            }
            // 自评
            this.$emit("getDataList", this.sid, this.kind_type_id);
            this.$emit("InitPage");
        },
        // 初始化
        InitData() {
            this.kind_type_id = "";
            this.sid = "";
            this.navData.forEach(item => {
                if (item.name == "科目") {
                    item.checkName = "全部科目";
                } else if (item.name == "类型") {
                    item.checkName = "全部类型";
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.nav-select {
    background: #fff;
    border-radius: 8px;
    padding: 24px 48px;
    box-sizing: border-box;
    margin-top: 24px;
    .grade {
        display: flex;
        margin-top: 20px;
        width: 100%;
    }
    .grade:first-child {
        margin-top: 0px;
    }
}
.grade {
    .grade-title {
        margin-right: 20px;
        padding: 4px 8px;
        box-sizing: border-box;
        width: 62px;
        margin: 5px 0px;
    }
    .grade-selects {
        display: flex;
        width: 100%;
        .grade-selects-cow {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }
    }
    .grade-selects-item {
        display: flex;
        padding: 4px 7px;
        box-sizing: border-box;
        margin: 5px 12px;
        color: #6d7785;
        cursor: pointer;
    }
    .grade-selects-item1 {
        display: flex;
        padding: 4px 7px;
        box-sizing: border-box;
        border-radius: 20px;
        color: #fff;
        background: #018854;
        margin: 5px 12px;
    }
    .grade-selects-zk {
        min-width: 50px;
        color: #018854;
        display: flex;
        align-items: center;
        cursor: pointer;
    }
}
</style>
